<template>
  <div style="background-color: #f2f7fb">
    <el-header class="Myheader" :style="stautsBar ? 'overflow:hidden;' : ''">
      <!-- 我的主页 -->
      <el-row v-if="stautsBar" class="Myheader_width">
        <el-col :span="3" class="Myheader_one"> 我的主页 </el-col>
        <el-col :span="3" class="Myheader_two">
          <router-link :to="{ name: 'Main' }"> 查看我的使用信息 </router-link>
        </el-col>
        <el-col :span="3" class="Myheader_img" :offset="14">
          <img src="../assets/logo03.png" alt="" />
        </el-col>
      </el-row>
      <!-- 他人主页 -->
    </el-header>
    <el-main class="Mymain">
      <!-- 他人主页 -->
      <!-- 我的主页 -->
      <el-row class="headinto" v-if="stautsBar">
        <el-col :span="2" class="headPhoto">
          <router-link to="/main/MyHome/myall">
            <img :src="info.headImg" alt="" />
          </router-link>
        </el-col>
        <el-col :span="9" class="headmsg">
          <div>
            <div>{{ info.nickname }}</div>
            <div>
              <span>{{ info.phone }}</span>
              <span>{{ info.age && info.age + "岁" }}</span
              >&nbsp;<span>{{ info.occupation }}</span>
            </div>
          </div>
          <div>
            <el-tag color="#2E2968" @click="redact">
              <i class="iconfont icon-bianji"></i> 编辑个人资料</el-tag
            >&nbsp;&nbsp;&nbsp;
            <el-tag color="#fcc64a" @click="dialogVisible=true">
                <i class="iconfont icon-pinglun"></i>我的聊天</el-tag
              >
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="7" class="cardLeft">
          <div class="cardLeft_one">
            <router-link to="/main/MyHome/mydisease">
              <div>{{ nums.disease }}</div>
              <div>收藏疾病</div>
            </router-link>
          </div>
          <div
            v-for="(item, index) in colorCls"
            :key="index"
            :class="item.color"
           @click="changeNoti"
          >
            <router-link :to="item.to">
              <div>{{ item.num }}</div>
              <div>{{ item.name }}</div>
            </router-link>
          </div>
          <hr style="width: 100%; margin: 10px 20px" />
          <div class="cardLeft_three">个人简介</div>
          <div class="cardLeft_four">
            {{ info.personalizedSignature || "暂无信息" }}
          </div>
          <div class="cardLeft_three">关注与粉丝</div>
          <div
            class="cardLeft_five"
            v-for="(item, index) in fourArr2"
            :key="index + 20"
             @click="changeNoti"
          >
            <router-link :to="item.to" class="cardLeft_five_a">
              <div class="cardLeft_five_a_one">
                <i :class="item.class1"></i>
                <span class="textblack">{{ item.name }}</span>
              </div>
              <span :class="item.class2">{{ item.num }}</span>
            </router-link>
          </div>
          <div class="cardLeft_three">我的经验</div>
          <div
            class="cardLeft_five"
            v-for="(item, index) in fourArr"
            :key="index + 10"
          >
            <router-link :to="item.to" class="cardLeft_five_a">
              <div class="cardLeft_five_a_one">
                <i :class="item.class1"></i>
                <span class="textblack">{{ item.name }}</span>
              </div>
              <span :class="item.class2">{{ item.num }}</span>
            </router-link>
          </div>

          <div class="cardLeft_three">其他</div>
          <div class="cardLeft_five">
            <router-link to="/main/MyHome/myhistory" class="cardLeft_five_a">
              <div class="cardLeft_five_a_one">
                <i class="iconfont icon-shoucang3 color_three"></i>
                <span class="textblack">收藏历史记录</span>
              </div>
            </router-link>
          </div>
          <div class="cardLeft_five" @click="showNoti">
            <a herf="javascript:void(0);" class="cardLeft_five_a" >
              <div class="cardLeft_five_a_one">
                <i class="el-icon-bell color_four"></i>
                <span class="textblack">我的通知</span>
              </div>
              <span class="color_four" >{{ $store.state.noti&&$store.state.noti.msgUnReadNum }}</span>
            </a>
          </div>
        </el-col>
        <el-col :span="15" :offset="1" class="cardRight">
          <router-view
          v-show="!isShowNoti"
            :id="$getStorage('userinfo').id"
            :collection="collection"
          ></router-view>
          <MyNoti v-if="isShowNoti" :collection="noti['0']" :collection1="noti['1']"></MyNoti>
        </el-col>
      </el-row>
    </el-main>
    <!-- 聊天框 -->
    <el-dialog :visible.sync="dialogVisible" width="60%">
      <MyChat/>
    </el-dialog>
  </div>
</template>

<script>
import MyNoti from "../components/myHome/MyNoti.vue";
import MyChat from '../components/myHome/MyChat.vue'
export default {
  name: "MyHome",
  components:{
    MyNoti,MyChat
  },
  data() {
    return {
      form: { text: "" },
      collection: {}, //收藏信息
      noti:[],//消息提示
      isShowNoti:false,
      colorCls: [
        {
          color: "cardLeft_two one",
          num: 25,
          name: "收藏经验",
          to: "/main/myexp/colexp",
        },
        {
          color: "cardLeft_two two",
          num: 16,
          name: "收藏知识",
          to: "/main/MyHome/myknowledeg",
        },
        {
          color: "cardLeft_two three",
          num: 18,
          name: "收藏视频",
          to: "/main/MyHome/myvideo",
        },
      ],
      fourArr: [
        {
          class1: "iconfont icon-fabu color_one",
          class2: "color_one",
          name: "发布经验",
          num: 3,
          to: "/main/myexp/relexpr",
        },
        {
          class1: "iconfont icon-shoucang3 color_two",
          class2: "color_two",
          name: "经验草稿",
          num: 7,
          to: "/main/myexp/expdra",
        },
      ],
      fourArr2: [
        {
          class1: "iconfont el-icon-thumb color_four",
          class2: "color_four",
          name: "关注列表",
          num: 5,
          to: "/main/MyHome/myconcern",
        },
        {
          class1: "iconfont el-icon-magic-stick color_three",
          class2: "color_three",
          name: "粉丝列表",
          num: 10,
          to: "/main/MyHome/myfans",
        },
      ],
      stautsBar: true,
      partChart: "",
      dialogVisible: false,
      //个人信息
      info: { name: null, img: null, phone: null },
      nums: {
        disease: 0,
        exp: 0,
        video: 0,
        know: 0,
      },
    };
  },
  created() {
    // console.log(new Date().getHours() + ":" + new Date().getMinutes());
    // this.stautsBar = this.$route.query.status === "1" ? true : false;
    if(this.$route.params.showMyNoti==true){
      this.showNoti();
    }
    if(this.$route.params){
      this.dialogVisible=this.$route.params.showNoti
    }
    this.$axios({
      url: "/user/findById",
      method: "post",
      data: this.$qs.stringify({
        userId: this.$getStorage('userinfo').id,
      }),
    }).then((res) => {
      console.log(res);
      if (res.code == 200) {
        let {
          experienceCollectionNum,
          experienceDraftNum,
          experiencePublishNum,
          fansNum,
          knowledgeCollectionNum,
          videoCollectionNum,
          concernNum,
        } = res.detail;
        //获取数量信息
        this.colorCls[0].num = experienceCollectionNum;
        this.colorCls[1].num = knowledgeCollectionNum;
        this.colorCls[2].num = videoCollectionNum;
        this.fourArr[0].num = experiencePublishNum;
        this.fourArr[1].num = experienceDraftNum;
        this.fourArr2[0].num = concernNum;
        this.fourArr2[1].num = fansNum;
      } else {
      }
    });

    this.stautsBar = true;
    this.info = this.$getStorage("userinfo");
    //获取每个收藏数据
    this.$store.dispatch("getMySelect").then((res) => {
      this.nums.disease = res.sicknessList.length;
      this.collection = res;
    });
  },
  methods: {
    redact() {
      //跳转编辑资料路由
      this.$router.push("/main/accset/myinfo");
    },
    //我的消息
    showNoti(){
      this.noti=this.$store.state.noti.messageNotify
      this.isShowNoti=true
    },
    changeNoti(){
      this.isShowNoti=false
    }
  },
};
</script>

<style lang="less" scoped>
@import url("../less/myhome.less");
</style>